<template>
  <div class="container">
    <div class="header">
      <Header></Header>
    </div>
    <div class="main">
      <el-form :inline="true" size="small">
        <el-form-item>
          <el-button icon="el-icon-plus" :disabled="loading" @click="handleCreate">新增账号</el-button>
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button
              icon="el-icon-check"
              :disabled="loading"
              @click="handleStatus(null, 1, true)"
            >启用</el-button>

            <el-button
              icon="el-icon-close"
              :disabled="loading"
              @click="handleStatus(null, 0, true)"
            >禁用</el-button>
          </el-button-group>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-delete" :disabled="loading" @click="handleDelete(null)">删除</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{{ props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="用户微信昵称" prop="id"></el-table-column>
        <el-table-column label="手机号码" prop="name"></el-table-column>
        <el-table-column label="操作" prop="desc">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="可输入昵称" :clearable="true" />
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号" :clearable="true" />
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="可选择出生日期"
            :clearable="true"
          />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">保密</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取消</el-button>

        <el-button
          v-if="dialogStatus === 'create'"
          type="primary"
          :loading="dialogLoading"
          @click="create"
          size="small"
        >确定</el-button>

        <el-button v-else type="primary" :loading="dialogLoading" @click="update" size="small">修改</el-button>
      </div>
    </el-dialog>
    <Pagination :total="100" :page="page" @pagination="handlePagination"></Pagination>
  </div>
</template>

<script>
import Header from './components/header.vue'
export default {
  components: {
    Header
  },
  data () {
    return {
      loading: false,
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }],
      page: 1,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑账号',
        create: '新增账号'
      },
      form: {
        mobile: undefined,
        nickname: undefined,
        sex: undefined,
        birthday: undefined
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          },
          {
            min: 7,
            max: 15,
            message: '长度在 7 到 15 个字符',
            trigger: 'blur'
          }
        ],
        nickname: [
          {
            max: 50,
            message: '长度不能大于 50 个字符',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  created () { },
  mounted () { },
  methods: {
    handleCreate () { },
    handleStatus () {

    },
    handleDelete () { },
    handleEdit () {
      this.dialogFormVisible = true
    },
    handlePagination (e) {
      console.log('??', e);
    },
    create () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogLoading = true
          if (!this.form.birthday) {
            delete this.form.birthday
          }

          /* addUserItem(this.form)
            .then(() => {
              this.dialogFormVisible = false
              this.$message.success('操作成功')
              this.$emit('refresh')
            })
            .catch(() => {
              this.dialogLoading = false
            }) */
        }
      })
    },
    update () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogLoading = true
          /* setUserItem(this.form)
            .then(res => {
              this.$set(
                this.currentTableData,
                this.currentIndex,
                {
                  ...this.currentTableData[this.currentIndex],
                  ...res.data,
                  get_auth_group: {
                    ...this.group.find(item => item.group_id === this.form.group_id)
                  }
                })

              this.dialogFormVisible = false
              this.$message.success('操作成功')
            })
            .catch(() => {
              this.dialogLoading = false
            }) */
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  .header {
    padding: 20px;
    border-bottom: 1px solid #ccc;
  }
  .main {
    padding: 20px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>